<template>
  <div>
    <!-- 
            1、标签式路由跳转
            位置:必须只能用在<template>部分
            注意：最终会被解析成a标签
            语法：<router-link>
            参数: to:必须要和路由规则中的path对应起来，前面必须加/
            2、路由出口的配置
            语法:<router-view>
         -->
    <div>
      <!-- <router-link to="/hot" class="item">热门新闻</router-link>
            <router-link to="/sport" class="item">体育新闻</router-link>
            <router-link to="/entertainment" class="item">娱乐新闻</router-link>
            <router-link to="/economics" class="item">财经新闻</router-link> -->
      <button class="item" @click="go(1)">热点新闻</button>
      <button class="item" @click="go(2)">体育新闻</button>
      <button class="item" @click="go(3)">娱乐新闻</button>
      <button class="item" @click="go(4)">财经新闻</button>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    go(params) {
      switch (params) {
        case 1:
          this.$router.push({
            path: "/hot",
          });
          break;

        case 2:
          this.$router.push({
            path: "/sport",
          });
          break;
        case 3:
          this.$router.push({
            path: "/entertainment",
          });
          break;
        case 4:
          this.$router.push({
            path: "/economics",
          });
          break;
      }
    },
  },
};
</script>

<style>
.item {
  margin: 0px 10px;
}
</style>